<template>
	<view >
		<view 
		class="text-center toptitle">
			一言
		</view>
		<!-- 头像框 -->
		<view class="margin-xl text-center">
			<image 
			class="cu-avatar xl round" 
			src="../../static/img/yiyan.png" mode="aspectFill"></image>
			<view class="margin-lg">注册账号</view>
		</view>
		<!-- 账号 -->
		<view class="padding">
			<custom-input v-model="username" icon="cuIcon-people" holder="请输入账号">	
			</custom-input>
		</view>
		<!-- 密码 -->
		<view class="padding">
			<custom-input v-model="passward" 
			icon="cuIcon-lock" holder="请输入密码"
			type="password">
			</custom-input>
		</view>
		<view class="padding">
			<custom-input 
			v-model="passward2" 
			icon="cuIcon-lock" holder="请确认密码"
			type="password">
			</custom-input>
		</view>
		<!-- 按钮 -->
		<view class="flex justify-between padding-xl align-center bt">
			<button @click="handleRegister" class="cu-btn bnt2">注册</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import { useRegister } from '../../api/user_api';
// 错误数据包
interface ErrorType{
	data?:{
		code:number,
		error:string
	}
}
//账号/密码
const username:Ref<string>=ref('')
const passward:Ref<string>=ref('')
const passward2:Ref<string>=ref('')
//注册功能
const  handleRegister=async()=>{
	console.log(222);
	if(passward.value==passward2.value){
		let title='注册成功'
	try {
		let res= await useRegister(username.value,passward.value)
		uni.navigateBack({
			delta:1
		})
	} catch (err) {
		title=(err as ErrorType).data!.error
	}
	uni.showToast({
		title,
		icon:'none'
	})
	}else{
		uni.showToast({
			title:'密码不相同',
			icon:'none'
		})
		console.log(111);
	}
}
</script>

<style lang="scss">
page{
	background-color: #666;
	background-image: url("../../static/img/bacround.png");
	background-blend-mode: overlay; /* 纹理与底色混合 */
}
.bt{
	margin-top: 300rpx;
	button{
		width: 90%;
	}
	.bnt2{
		color: #eeeeee;
		background-color: #444444;
		 opacity: 0.8
	}
}  
.toptitle{
	font-size: 50px; 
	margin: 20rpx 0 100rpx;
}  

</style>
